<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--[if lt IE 9]><!-->
		<script src="http://code.jquery.com/jquery-1.11.3.min.js "></script>
		<!--<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="https://code.jquery.com/jquery-3.2.1.min.js "></script>
		<!--<![endif]-->
		<script>
			/*---------------1111111111111111--------------*/
			/*
			 *添加函数到 blur 事件。当 <input> 字段失去焦点时发生 blur 事件
			 * 当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时），发生 focus 事件。
			 * focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数。
			 * 提示：该方法通常与 blur() 方法一起使用。
			 */
			/*$(document).ready(function() {
				$("input").focus(function() {
					$(this).css("background-color", "aquamarine");
				});
				$("input").blur(function() {
					$(this).css("color", "#ff0000");
				});
			});*/
			/*-----------------------------*/
			/*
			 *change 事件会在元素失去焦点时发生。
			 */
			/*$(document).ready(function() {
				$(".field").change(function() {
					$(this).css("background-color", "#D6D6FF");
				});
			});*/

			/*--------------222222222222222222222---------------*/
			/*
			 *单击事件和双击事件
			 */
			/*$(document).ready(function() {
				$("button").click(function() {
					$("p").click();
				});
				$("p").click(function() {
					$(this).fadeOut();
				});
			});*/
			/*$(document).ready(function() {
				$("button").click(function() {
					$("p").dblclick();
				});
				$("p").dblclick(function() {
					$(this).fadeOut();
				});
			});*/
			/*--------------33333333333333333333333---------------*/
			/*
			 *添加函数到 blur 事件。当 <input> 字段失去焦点时发生 blur 事件
			 */
			/*$(document).ready(function() {
				$("div").delegate("p", "click", function() {
					$("p").css("background-color", "pink");
				});
			});
			$(document).ready(function() {
				$("div").delegate("p", "click", function() {
					$(this).slideToggle();
				});
				$("button").click(function() {
					$("<p>这是一个新段落。</p>").insertAfter("button");
				});
			});*/
			/*--------------44444444444444444---------------*/
			/*
			 *
			 */
			$(document).ready(function() {
				$("p").live("click", function() {
					$(this).slideToggle();
				});
				$("button").click(function() {
					$("p").die();
				});
			});
			
		</script>
	</head>

	<body>
		<!--///////////////////111111111111111111111111111/////////////////////////////-->
		<!--输入你的名字: <input class="field" type="text">
		<p>在输入框中写一些东西，按下 enter 键或点击输入框外的区域。</p>

		<p>汽车匹配:
			<select class="field" name="cars">
				<option value="volvo">Volvo</option>
				<option value="saab">Saab</option>
				<option value="fiat">Fiat</option>
				<option value="audi">Audi</option>
			</select>
		</p>
		<p>在下拉列表选择一个选项。</p>-->
		<!--/////////////////22222222222222222////////////////////-->
		<!--<button>触发 p 元素上的  click 事件</button>
		<p onclick="alert('Click 事件被触发')">这是一个段落。</p>
		<p ondblclick="alert('dblclick 事件被触发')">这是一个段落。</p>
		-->
		<!--///////////////////33333333333333333///////////////////-->
		<!--<div style="background-color:yellow">
			<p>这个段落在 div 元素内。</p>
			<p>点击任意一个 p 元素，使其消失，包括这个。</p>
			<button>在这个按钮后新增一个 p 元素</button>
		</div>
		<p><b>注意:</b> 只有在 div 元素中的 p 元素才有效果。</p>-->

		<!--//////////////////////4444444444444///////////////////-->
		<p>这是一个段落。</p>
		<p>这是另外一个段落。</p>
		<p>点击任意一个段落，使其消失。</p>
		<button>移除事件句柄，p 元素的click事件通过 live() 方法来添加。</button><br><br>

		<div><b>注意:</b>die() 方法在 jQuery 版本 1.7 中被废弃，在版本 1.9 中被移除。</div>

	</body>

</html>